import React, { Component } from 'react';
import $ from "jquery";
import "../css/base.css";
import "../css/detail.css";
import {connect} from "react-redux";
// import {BrowserRouter as Router, Route,Link} from 'react-router-dom';
import {HashRouter as Router, Route, Link} from 'react-router-dom';



class Details extends Component {
  componentDidMount(){
	var that = this;
	// var id=this.props.location.pathname.match(/\d*/g).join(''); 
	var id = that.props.match.params.id;
	console.log(id+"1111111111111111111111111111111111111111111111111111111111111");
	$.get('http://localhost:8080/detail?id='+id,function(res){
		var data = JSON.parse(res).data.film;
		var arr =[];
		arr[0] = data;
		that.props.getDeteilData(arr);
		console.log(arr);
		that.props.changeTitle(arr[0].name);
	})
	  
  }
  render() {
	return (
		<div className="components">
			{
				this.props.getDeteil.map(function(item,index){
					// console.log(item)
					var time = new Date(item.premiereAt);
					var month = time.getMonth()+1;
					var day = time.getDate()+1;
					return(
						<div key={index}>
							<img src={item.cover.origin} alt="图片显示异常"/>
							<div className="film_content">
								<h2>影片简介</h2>
								<p className="daoyan">导　　演：{item.director}</p>
								<p className="zhuyan">主　　演：
									{
										item.actors.map(function(val,num){
											return(
												<span key={num}>{val.name}<i className="line">|</i></span>
											)
										})
									}
								</p>
								<p className="yuyan">地区语言：{item.nation}({item.language})</p>
								<p className="type">类　　型：{item.category}</p>
								<p className="date">上映日期：{month}月{day}日上映</p>
								<p className="jieshao">{item.synopsis}</p>
							</div>
							<Link className="buy" to="/cinema">立即购票</Link>
						</div>
					)
				})
			}
		</div>
	);
  }
}

var Detail = connect(
  function(state, ownProps) {
	return {
		 getDeteil:state.detailData 
	}
  },
  function(dispatch, ownProps) {
   return {
		getDeteilData:function(data){
			dispatch({
				type:"GETDETAILDATA",
				data:data
			})
		},
		 changeTitle:function(data){
          dispatch({
                type:"CHANGETITLE",
                title:data
          })
      }
	}
  }
)(Details);

export default Detail;